<script lang="ts" setup>
import { ref } from 'vue';

import { useVbenModal } from '@vben/common-ui';

import { useFs } from '@fast-crud/fast-crud';

import { SopPermGroupApi } from '#/api/devOperation/sop/sopPermGroup';
import { useMessage } from '#/hooks/web/useMessage';
import { $t } from '#/locales';

import { createCrudOptions } from '../data/group';

interface Emits {
  (e: 'success'): void;
}

defineOptions({
  name: '设置分组',
  inheritAttrs: false,
});

const emit = defineEmits<Emits>();

const { crudBinding } = useFs({ createCrudOptions });

const formRef = ref();
const { createMessage } = useMessage();

async function formSubmit() {
  await formRef.value.submit();
  createMessage.success($t(`common.tips.addSuccess`));
  modalApi.close();
  emit('success');
}

const [Modal, modalApi] = useVbenModal({
  async onOpened() {
    const isvId = modalApi.getData()?.isvId;

    const groupIdList = await SopPermGroupApi.listByGroupId(isvId);

    formRef.value.setFormData({ isvId, groupIdList }, { mergeForm: false });
  },
  onConfirm: formSubmit,
});
defineExpose(modalApi);
</script>

<template>
  <Modal title="设置分组" class="w-[60%]">
    <div class="common-form">
      <FsForm ref="formRef" v-bind="crudBinding.addForm" />
    </div>
  </Modal>
</template>
